import {
  Row,
  Col,
  Form,
  Input,
  InputNumber,
  Modal,
  Select,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


//新增表单
const CreateForm = Form.create()(props => {
  const { modalVisibleByAuth, form, handleAddByAuth, handleModalVisibleByAuth } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAddByAuth(fieldsValue);
    });
  };
  return (
    <Modal
width={800}
destroyOnClose
title="新增"
visible={modalVisibleByAuth}
onOk={okHandle}
onCancel={() => handleModalVisibleByAuth()}
>
<Form  layout="vertical">

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
		        <FormItem  label="角色名称">
		            {form.getFieldDecorator('auth_name', {
		
		            rules: [{ required: true, message: '请输入角色名称', min: 1 }],
		
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
        </Col>

        <Col  md={12} sm={24}>
		        <FormItem  label="角色类型">
		            {form.getFieldDecorator('auth_type', {
		
		            rules: [{ required: true, message: '请输入以ROLE_开头与必须以大写字母结尾', pattern:/^ROLE_[A-Z]+$/}],
		            initialValue: 'ROLE_XXXX',
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
        </Col>

    </Row>
    
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        
        <Col  md={12} sm={24}>
		        <FormItem  label="角色级别">
		            {form.getFieldDecorator('auth_level', {
		            rules: [{ required: true, message: '请输入角色级别'}],
		            })(<InputNumber placeholder="请输入" style={{width: '100%'}}/>)}
		        </FormItem>
        </Col>
        <Col  md={12} sm={24}>
		        <FormItem  label="描述信息">
		            {form.getFieldDecorator('auth_description', {
		            rules: [{ required: false}],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
        </Col>

    </Row>

</Form>
</Modal>
  );
});

export default CreateForm;
